<template>
  <div class="box">
    <!-- 头部1 -->
    <div class="head" v-show="show == 0">
      <span>产品名称：</span>
      <el-input v-model="input" placeholder="请输入内容"></el-input>
      <span class="zhuan">状态：</span>
      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button
        class="sousuo"
        type="primary"
        icon="el-icon-search"
        @click="search(input, value)"
        ><span>搜索</span></el-button
      >
      <el-button class="qingk" icon="el-icon-delete" @click="empty"
        ><span>清空</span></el-button
      >
    </div>
    <!-- 头部2 -->
    <div class="head-t clearfix">
      <div class="head-t-left">
        <el-button type="primary" icon="el-icon-plus" @click="newly"
          >新增</el-button
        >
        <el-button type="danger" plain @click="dele">批量删除</el-button>
      </div>
      <div class="head-t-right">
        <el-button icon="el-icon-refresh" circle @click="refresh"></el-button>
        <el-button icon="el-icon-search" circle @click="xians"></el-button>
      </div>
    </div>
    <!-- 头部3 -->
    <div class="head-s">
      <div class="shuju">
        <span>当前表格已选择 {{ length }} 项 </span>
        <span class="qk" @click="toggleSelection()">清空</span>
      </div>
    </div>
    <!-- 表格 -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      border
      stripe
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <!-- <el-table-column
      label="日期"
      width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column> -->
      <el-table-column prop="prodName" label="产品名称" width="170">
      </el-table-column>
      <el-table-column
        prop="oriPrice"
        label="商品原价"
        width="170"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="price"
        label="商品现价"
        width="170"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="totalStocks"
        label="商品库存"
        width="170"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="imgs"
        label="产品图片"
        width="170"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <el-image
            style="width: 50px; height: 50px"
            :src="`http://admin.yami.byesame.com//apis/mall4j/img/${scope.row.imgs}`"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column
        prop="statuss"
        label="状态"
        width="170"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.statuss === '上架' ? 'primar' : 'primar'"
            size="medium"
            >{{ scope.row.statuss }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column class-name="caoz" width="310" label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-edit"
            @click="handleEdit(scope.$index, scope.row)"
            >修改</el-button
          >
          <el-button
            size="mini"
            icon="el-icon-delete"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
      <el-button @click="toggleSelection([tableData[1], tableData[2]])"
        >切换第二、第三行的选中状态</el-button
      >
      <el-button @click="toggleSelection()">取消选择</el-button>
    </div>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[10, 20, 30, 40, 50, 100]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 时间戳
      timestamp: Math.floor(Date.now() / 1000),
      // 头部显示隐藏
      show: 0,
      input: "",
      options: [
        {
          value: "0",
          label: "为上架",
        },
        {
          value: "1",
          label: "上架",
        },
      ],
      value: "",
      // 表格
      tableData: [],
      multipleSelection: [],
      length: 0,
      // 分页
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      total: 0,
      pages: 10,
      foom: "",
      // 批量删除
      a:[]
    };
  },
  created() {
    this.MyList();
  },
  methods: {
    // 时间戳
    formattedDate() {
      this.timestamp = Math.floor(Date.now() / 1000);
    },
    // 头部显示
    xians() {
      if (this.show == 0) {
        this.show = 1;
      } else if (this.show == 1) {
        this.show = 0;
      }
    },
    // 刷新
    refresh() {
      this.MyList();
    },
    // 搜索
    search(a, b) {
      console.log(a, b);
      this.$http
        .get("http://admin.yami.byesame.com/apis/prod/prod/page", {
          params: {
            t: this.timestamp,
            current: 1,
            size: 10,
            prodName: a,
            status: b,
          },
        })
        .then((res) => {
          console.log("搜索", res);
          this.tableData = res.data.records;
          for (let i = 0; i < res.data.records.length; i++) {
            const item = res.data.records[i];
            console.log("item", item);

            if (item.status == 1) {
              item.statuss = "上架";
            } else {
              item.statuss = "未上架";
            }
          }
        });
    },
    // 搜素清空
    empty() {
      (this.input = ""), (this.value = "");
    },
    // 批量删除
    dele() {
      this.$confirm("确认进行[批量删除操作]?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          for (let i = 0; i < this.multipleSelection.length; i++) {
            let a = []
            a.push(this.multipleSelection[i].prodId)
            this.$http
              .delete(
                "http://admin.yami.byesame.com/apis/prod/prod",{
                  data:a
                }
              )
              .then((res) => {
                console.log("批量删除", res);
                this.MyList()
              });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 新增
    newly() {
      this.$router.push("prodInfo");
    },
    // 表格数据
    MyList() {
      this.$http
        .get("http://admin.yami.byesame.com/apis/prod/prod/page", {
          params: {
            t: this.timestamp,
            current: 1,
            size: 10,
          },
        })
        .then((res) => {
          console.log("表格数据", res);
          this.tableData = res.data.records;
          this.total = res.data.total;
          // 状态
          for (let i = 0; i < res.data.records.length; i++) {
            const item = res.data.records[i];
            console.log("item", item);

            if (item.status == 1) {
              item.statuss = "上架";
            } else {
              item.statuss = "未上架";
            }
          }
        });
    },
    // 表格
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
      this.length = this.multipleSelection.length;
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pages = val;
      console.log("页码", this.pages);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.foom = val;
      console.log("当前页", this.foom);
      this.$http
        .get("http://admin.yami.byesame.com/apis/prod/prod/page", {
          params: {
            t: this.timestamp,
            current: this.foom,
            size: this.pages,
          },
        })
        .then((res) => {
          console.log("表格数据", res);
          this.tableData = res.data.records;
          this.total = res.data.total;
        });
    },
  },
};
</script>

<style scoped>
/* 轻浮的 */
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
/* 头部 */
.el-input {
  width: 300px;
  height: 10px;
}
>>> .el-input__inner {
  height: 30px;
}
.zhuan {
  margin-left: 60px;
}
.el-select {
  width: 300px;
}
.sousuo {
  margin-left: 60px;
  height: 30px;
  line-height: 3px;
  padding: 9px 20px;
}
.qingk {
  margin-left: 40px;
  height: 30px;
  line-height: 3px;
  padding: 9px 20px;
}

/* 头部2 */
.head-t {
  margin-top: 20px;
}
.head-t-left {
  float: left;
}
.head-t-right {
  float: right;
}
/* 头部三 */
.shuju {
  width: 200px;
  height: 35px;
  background-color: #e5f5fd;
  font-size: 16px;
  text-align: center;
  line-height: 35px;
  color: #4bc0f4;
}
.qk {
  cursor: pointer;
}
/* 表格 */
>>> .el-table th {
  background-color: #fafafa;
}
>>> .el-table .cell {
  text-align: center;
}
</style>